/*
 * @Author: liuqiang
 * @Date: 2021-09-29 18:12:19
 * @LastEditTime: 2021-10-01 16:23:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \练习\ts-webpack\webpack.config.js
 */
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

// webpack中所有的配置信息都写到module.exports下
module.exports = {
  mode: 'development',
  // 指定入口文件
  entry: "./src/index.ts",
  // 指定生成打包文件所在目录
  output: {
    // 指定生成打包文件所在目录
    path: path.resolve(__dirname, "dist"),
    // 指定生成的打包文件名称
    filename: "bundle.js",
    // 告诉webpack不使用箭头函数和const
    environment: {
      arrowFunction: false,
      const: false
    }
  },
  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
     {
      //  test 指定的是规则生效的文件
      test: /\.ts$/,
      // 要使用哪个loader处理test配置的文件
      use: [
        // 配置babel
        {
          loader: 'babel-loader',
          // 设置babel
          options: {
            // 预定义环境
            presets: [
              [
                // 指定环境插件
                "@babel/preset-env",
                // 配置信息
                {
                  // 要兼容目标浏览器
                  targets: {
                    "chrome": '58',
                    "ie": '11'
                  },
                  // corejs版本
                  "corejs": '3',
                  // 使用corejs的方式“usage”  标识按需加载
                  "useBuiltIns": 'usage'
                }
              ]
            ]
          }
        },
        'ts-loader'
      ],
      // 排除哪些文件
      exclude: /node-modules/
     },
    //  设置less文件的处理
    {
      test: /\.less$/,
      use: [
        "style-loader",
        "css-loader",
        // 引入postcss-loader 给css添加兼容前缀
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [
                [
                  "postcss-preset-env",
                  // 指定兼容浏览器
                  {
                    browsers: "last 2 versions"
                  }
                ]
              ]
            }
          }
        },
        "less-loader"
      ]
    }
    ]
  },
  // 配置webpack插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ],
  // 设置哪些文件可以作为模块使用
  resolve: {
    extensions: ['.ts', '.js']
  }
}